<template>
	 <view class="content" :style="{'padding-top':'calc(' + statusBarHeight+'px' + ')',backgroundImage: 'url('+inviteBgc+')',height:HH+'px',width:WW+'px'}">
		<uni-nav-bar  :border="false" left-icon="left" v-if="!backgroundColor" backgroundColor="transparent"  @clickLeft="back" class="nav" :style="{top:'calc(' + statusBarHeight+'px' + '20rpx)',}"> </uni-nav-bar>
		<uni-nav-bar  :border="false" left-icon="left" v-else backgroundColor="#fbdfd9"  @clickLeft="back" class="nav" :style="{top:'calc(' + statusBarHeight+'px' + '20rpx)',}"> </uni-nav-bar>
	     
		 <view class="flex_row_center_center">
			 <image src="../../static/images/other/name_label.png" mode="widthFix" class="nameTitle"></image>
		 </view>
		 
		 <view class="name">
			 <view class="name_title">起名资料</view>
			 <view class="name_list">
				 <view class="flex_row_start_center name_list_item">
				 	<view class="name_list_item_l">姓名：</view>
				 	<input placeholder="请输入姓名" placeholder-class="placeholder-class" class="nameInput" />
				 </view>
				 <view class="flex_row_start_center name_list_item">
				 	<view class="name_list_item_l">姓名：</view>
				 	<input placeholder="请输入姓名" placeholder-class="placeholder-class" class="nameInput" />
					<view class="flex_row_start_center name_list_item_r">
						<view class="current">中间</view>
						<view>末尾</view>
					</view>
				 </view>
				 <view class="flex_row_start_center name_list_item">
				 	<view class="name_list_item_l">性别：</view>
				 	<view class="flex_row_start_center">
				 		<label class="flex_row_center_center" style="margin-right: 48rpx;">
				 			<radio value="r1" checked="true" style="transform:scale(0.5) "  /> 
				 			<view>男</view>
				 		</label>
				 		<label class="flex_row_center_center" >
				 			<radio value="r1" style="transform:scale(0.5)"  /> 
				 			<view>女</view>
				 		</label>
				 	</view>
				 </view>
				 <view class="flex_row_start_center name_list_item">
				 	<view class="name_list_item_l">字数：</view>
				 <view class="flex_row_start_center">
				 	<label class="flex_row_center_center" style="margin-right: 48rpx;">
				 		<radio value="r1" checked="true" style="transform:scale(0.5) "  /> 
				 		<view>单字</view>
				 	</label>
				 	<label class="flex_row_center_center" >
				 		<radio value="r1" style="transform:scale(0.5)"  /> 
				 		<view>双字</view>
				 	</label>
				 </view>
				 </view>
				 <view class="flex_row_start_center name_list_item">
				 	<view class="name_list_item_l">出生时辰:</view>
				 	<view>公历1999年06月15日12：00</view>
				 </view>
				 <view class="flex_row_start_center name_list_item">
				 	<view class="name_list_item_l">出生地点:</view>
				 	<view>请选择</view>
				 </view>
				 <view class=" name_list_item">
				 	<view class="name_list_item_l" style="margin-bottom: 26rpx;">起名期望:</view>
				 	<view class="name_options">
						<view class="name_options_item" v-for="(item,index) in list " :key="index">{{item}}</view>
					</view>
				 </view>
			 </view>
			 <view class="name_button" @click="natTo('/pages/name/name_detail')">测算名字</view>
		 </view>
	
		
		
	  
	    </view>
</template>

<script>
    import uQRCode from '@/utils/uqrcode.js'

	  import {
		mapState,
		mapMutations
	  } from 'vuex'

    export default {
        data() {
            return {
                imgUrl: getApp().globalData.imgUrl,
                HH: getApp().globalData.windowHeight,
                WW: getApp().globalData.screenWidth,
				statusBarHeight:getApp().globalData.statusBarHeight,
				inviteBgc:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yj/name.png',
				backgroundColor:false,
				list:['音律优美','意境优美','智慧','安康','自信']
            }
        },
        onLoad() {

              
            
        },
        onShow() {
			
        },
		computed: {
			// ...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		onPageScroll(e) {
			// console.log(e);
			if(e.scrollTop>30){
				this.backgroundColor=true
				
			}else{
				this.backgroundColor=false
			}
		},


        methods: {
			back(){
				uni.navigateBack({delta:1})
			},
			natTo(url){
					this.$tab.navigateTo(url)
			},


        }
    }
</script>
<style>
	
	 
</style>

<style lang="scss">
  page{
    background-color: #f4f3ef;
	// padding-bottom: 30rpx;
  }
  
  .nav{
	  position: fixed;
	  left: 0;
	  width: 750rpx;
	  z-index: 999;
  }

   .content {
        background-size: 100% auto; //背景图片能够显
        background-repeat: no-repeat;
        position: relative;
    }
	.nameTitle{
		width: 398rpx;
		height: 200rpx;
		margin-top: 108rpx;
	}
	.name{
		position: fixed;
		width: 732rpx;
		left: 18rpx;
		right: 18rpx;
		bottom: 10rpx;
		background-color: #fff;
		border-radius: 54rpx ;
		padding: 28rpx 0  10rpx 0;
		
		.name_title{
			font-size: 36rpx;
			color: #9B4C3A;
			text-align: center;
			font-weight: bold;
			margin-bottom: 36rpx;
		}
		
		.name_list{
			padding: 0 66rpx 0 82rpx;
			
			.name_list_item{
				font-size: 26rpx;
				margin-bottom: 38rpx;
				
				.name_list_item_l{
					width: 130rpx;
					height: 34rpx;
					
					color:#887555 ;
				}
				&:last-child{
					margin-bottom: 18rpx;
				}
				
				.nameInput{
					padding-left: 15rpx;
				}
				.name_list_item_r{
					border: 2rpx solid #9E4035;
					border-radius: 8rpx;
					& view{
						width: 76rpx;
						height: 50rpx;
						font-size: 22rpx;
						line-height: 50rpx;
						text-align: center;
					}
					& .current{
						background-color: #9E4035;
						color: #fff;
					}
				}
			}
		}
		
		.name_button{
			font-size: 32rpx;
			color: #fff;
			width: 580rpx;
			height: 104rpx;
			line-height: 104rpx;
			text-align: center;
			background-color: #9E4035;
			border-radius: 8rpx;
			margin: 0 72rpx 0 68rpx;
		}
	}
	
	.name_options{
		flex-wrap: wrap;
		display: flex;
		align-items: center;
		
		.name_options_item{
			width: 124rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 8rpx;
			background: #88755526;
			font-size: 28rpx;
			color: #887555;
			margin-right: 20rpx;
			margin-bottom: 18rpx;
			&:nth-child(4n){
				margin-right: 0;
			}
		}
	}
	
	
    
</style>